<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取款</title>
    <script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <style>
        span{
            color : red;
        }
    </style>

</head>
<body>
<h1>取款</h1>
<div id="app" style="width: 500px;margin: auto">
    账号:<input type="number" v-model="accountid">
        <span v-text="errorMsg.accountid"></span><br>
    金额:<input type="number" v-model="balance">
        <span v-text="errorMsg.balance"></span><br>
    <button @click="withdraw">取款</button>
</div>

<script>
    var v = new Vue({
        el:"#app",
        data : {
            accountid:"",
            balance:0 ,
            errorMsg : { accountid : "", balance: ""}
        },
        methods : {
            withdraw(){
                var params = new URLSearchParams();
                params.append("accountid",this.accountid);
                params.append("balance",this.balance);
                axios.post("withdraw.do", params).then(res=>{
                    //alert(res.data.msg);
                    if(res.data.code == 1){
                        alert("存款成功!");
                    } else {
                        console.info(res.data.data); // ==> [ {field,defaultMesssge},{},{}]
                        if(! res.data.data ){
                            alert(res.data.msg)
                        }
                    }
                    this.errorMsg.accountid = this.getErrorMsg(res.data.data, "accountid");
                    this.errorMsg.balance = this.getErrorMsg(res.data.data, "balance");
                })
            },
            getErrorMsg(errors, field){
                var msg = "";
                if(Array.isArray(errors)){
                    for (let error of errors) {
                        if(error.field == field){
                            msg += msg == '' ? '' : ',';
                            msg += error.defaultMessage;
                        }
                    }
                }
                return msg;
            }
        }

    })



</script>

</body>
</html>